import React from 'react'

interface StatusInfoProps {
  activeCount: number
  maxCapacity: number
  queueLength: number
  barrageDataLength: number
  displayedCount: number
  serverStatus: 'connected' | 'disconnected' | 'checking'
  syncStatus: 'synced' | 'syncing' | 'paused'
  isFull: boolean
}

/**
 * 状态信息组件
 */
export const StatusInfo: React.FC<StatusInfoProps> = ({
  activeCount,
  maxCapacity,
  queueLength,
  barrageDataLength,
  displayedCount,
  serverStatus,
  syncStatus,
  isFull
}) => {
  return (
    <div className="status-info">
      <span>弹幕容量: {activeCount}/{maxCapacity}</span>
      <span>队列等待: {queueLength}条</span>
      <span>数据库弹幕: {barrageDataLength}条</span>
      <span>已显示: {displayedCount}条</span>
      <span className={`server-status ${serverStatus}`}>
        服务器: {
          serverStatus === 'connected' ? '🟢 已连接' :
          serverStatus === 'disconnected' ? '🔴 离线' : '🟡 检查中'
        }
      </span>
      <span className={`sync-status ${syncStatus}`}>
        同步: {
          syncStatus === 'synced' ? '✅ 已同步' :
          syncStatus === 'syncing' ? '🔄 同步中' : '⏸️ 已暂停'
        }
      </span>
      {isFull && <span className="full-warning">⚠️ 弹幕容量已满</span>}
    </div>
  )
}

